//指尖血糖
@import "common_c";

// nav  tab 的样式⬇️
#wrapper {
  min-width: 1350px;
}

@font1: .0625rem;

#bgNav {
  .navTab {
    background-color: #fff;
    ul {
      li {
        border-left: none;
        background-color: #fff;
        padding: 0;
        &.fbgLi, &.dbgLi {
          height: 70px;
          div {
            display: inline;
            margin-top: 20px;
            padding: 0 30px;
            text-align: center;
            a {
              color: @font-color;
              font-size: 1.25rem;
              display: block;
              margin-bottom: 13px;
              &:hover {
                color: #1ab394;
              }
            }
            i {
              display: none;
              //display: inline-block;
              width: 40px;
              border-bottom: 3px solid #1ab394;
            }
          }

        }
        &.active {
          &.fbgLi, &.dbgLi {
            div {
              a {
                color: #1ab394;
              }
              i {
                display: inline-block;
              }
            }

          }
        }
        &.fbgLi {
          div {
            float: right;
          }
        }
        &.dbgLi {
          div {
            float: left;
          }
        }

      }
    }
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

button {
  outline: none;
}

//下方重要的内容样式⬇️
#BG {

  margin-top: 20px;
  color: #333333;
  font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
  #FBG {
    //display: none;
    #FBGChart1 {
      display: none;
    }
    #FBGChart2 {
      margin-top: 40px;
      &>div{
        margin: -25px auto auto -80px!important;
      }
    }
    & > .top {
      overflow: hidden;
      border-top: 1px solid transparent;
      background-color: #f3f3f4;
      height: 490px;
      .FBGRange {
        //overflow: hidden;
        float: left;
        background-color: #fff;
        width: 27%;
        min-width: 370px;
        .FBGSet {
          background: #FFFFFF;
          border: 1px solid #E5E6E7;
          height: 490px;
          border-top: 6px solid #E7EAEC;
          .BGHeader {
            box-sizing: content-box;
            border-bottom: 1px solid #E7EAEC;
            overflow: hidden;
            padding: 8px;
            font-weight: normal;
            margin-bottom: 0;
            .Text {
              float: left;
              font-size: 16px;
              color: #333333;
            }
            .Unit {
              float: right;
              font-size: 14px;
              color: #1AB394;
            }
          }
          .stageList {
            li {
              overflow: hidden;
              &:nth-child(2n) {
                background-color: #fff;
              }
              border-bottom: 1px solid #E7EAEC;;
            }
            .preMeal {
              //height: 95px;
              background: #FAFAFA;
              padding: 17px 10px 17px 22px;
              .stageText {
                margin-bottom: 12px;
                font-size: 16px;
                i {
                  display: inline-block;
                  width: 11px;
                  height: 11px;
                  border-radius: 50%;
                  background-color: #1AB394;
                  margin-right: 10px;
                }
              }
              .default {
                padding: 0;
                width: 45%;
                float: left;
                span {
                  font-size: 14px;
                  color: #333333;
                }
                .defVal {
                  padding: 0;
                  display: inline-block;
                  background: #EDEDED;
                  border-radius: 2px;
                  font-size: 14px;
                  width: 50%;
                  height: 32px;
                  line-height: 32px;
                  text-align: center;
                  color: #333333;
                }
              }
              .setText {
                margin-left: 2%;
                width: 53%;
                padding: 0;
                float: left;
                span {
                  font-size: 14px;
                  color: #333;
                }
                .setLeftVal, .setRightVal {
                  font-size: 14px;
                  outline: none;
                  width: 30%;
                  text-align: center;
                  display: inline-block;
                  //width: 55px;
                  background: #FFFFFF;
                  border: 1px solid #E5E6E7;
                  border-radius: 2px;
                  height: 32px;
                  line-height: 32px;
                  &:focus {
                    border: 1px solid #1ab394;
                  }
                }

              }
            }
          }
          .FBGRangeSave {
            //float: right;
            margin: 2px 28px;
            background: #1AB394;
            border-radius: 4px;
            font-size: 16px;
            color: #FFFFFF;
            width: 82px;
            padding: 0;
            height: 34px;
            line-height: 33px;
            text-align: center;
          }
        }

      }
      .FBGChartDateLeft {
        margin-top: 6px;
        //margin-left: 2.9%;
        background-color: #fff;
        width: 70%;
        float: right;
        height: 100%;
        //padding-bottom: 20px;
        @media screen and (min-width:600px) and (max-width:1500px){
          width: 67%;
        }
        .searchFBG {
          padding: 20px 40px;
          b {
            font-size: 1rem;
            margin-right: 25px;
          }
          input {
            display: inline-block;
            width: 10rem;
          }
          div.SelfWarning {
            display: inline-block;
            height: @font1*34;
            float: right;
            text-align: right;
            line-height: 34*@font1;
            i {
              margin: 0 @font1*3;
            }
            span {
              margin: 0 @font1*10 auto @font1*4;
            }
          }
        }
        div.bodyDiv {
          height: 262px;
          //width: 100%;
          margin-top: -1px;
          overflow-y: scroll;
        }
        table#ChartTable, .headT {
          margin-bottom: 0;
          &.headT {
            padding-bottom: 0;
            margin-bottom: .5rem;
            border: 0;
            td {
              border: 0;
            }
          }
          //&#ChartTable {
          //  border-top: none;
          //  margin-bottom: -1px;
          //}
          border-right: none;
          thead {
            tr {
              td {
                font-size: 1rem;
                user-select: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                background-color: #fff;
                padding: 10px 16px;
                .spanHide {
                  opacity: 0;
                  margin: 0;
                  padding: 0;
                  float: none;
                }
              }
            }
          }
          tbody {
            tr {
              td {
                overflow: visible;
                input.BGInput {
                  font-size: .8rem !important;
                  &::-webkit-outer-spin-button,
                  &::-webkit-inner-spin-button {
                    -webkit-appearance: none !important;
                    margin: 0;
                  }
                  width: 50%;
                  //height: 100%;
                  display: inline-block;
                  background-color: transparent;
                  border: none;
                  outline: none;
                  text-align: center;
                  &.dateInput {
                    width: 100%;
                  }
                }

              }
            }
          }
        }
        ul.showType {
          margin: 32px;
          position: relative;
          border-bottom: 1px solid #999;
          li {
            margin-bottom: -2px;
            display: inline-block;
            padding: 8px 16px;
            font-size: 16px;
            border: 1px solid transparent;
            border-radius: 4px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            //border-bottom:1px solid #999;
            &.active {
              background-color: #fff;
              border: 1px solid #999;
              border-bottom: none;
              color: #1ab394;
            }
            &:hover {
              cursor: pointer;
              color: #1ab394;
            }

          }
          &>div{
            cursor: pointer;
            background: #FFFFFF;
            border: 1px solid #E5E5E5;
            border-radius: 4px;
            padding: 6px 10px;
            position: absolute;
            top:-12px;
            right: 50px;
            font-size: 15px;
            color: #666666;
            i{
              color:#1AB394;
            }
          }
        }
        #contentSwitch {
          height: 360px;
          margin-top: -1px;
          padding-bottom: 3rem;
          //overflow-y: scroll;
          //overflow-x: hidden;
          div.section {
            width: 100%;
            margin-top: 30px;
            margin-left: 1rem;
            .caption {
              height: 14px;
              padding-left: 20px;
              color: #4c4c4c;
              font-size: 14px;
              font-weight: bold;
              line-height: 14px;
            }
            .section-con {
              //margin-left: 2rem;
              //border-left: 1px solid #aaa;
              .item {
                padding: 0 2rem;
                overflow: hidden;
                width: 100%;
                .typeImg {
                  margin-top: 1rem;
                  float: left;
                }
                .item-r {
                  padding: 1rem;
                  float: left;
                  width: 90%;
                  border-left: 1px solid #aaa;
                  .timeBox {
                    .time1 {
                      display: inline-block;
                      width: 3rem;
                    }
                    b {
                      color: #1ab394;
                      font-weight: normal;
                      margin: 0 1rem;
                    }
                  }
                  .textBox {
                    border: none !important;
                    //margin-left: 4rem;
                    padding-left: 4rem;
                    white-space: normal;
                    overflow: visible;
                    min-height: 30px;

                  }
                  .picBox {
                    //border:1px solid red;
                    width: 70px;
                    display: inline-block;
                    margin-right: 10px;
                    height: 70px;
                    overflow: hidden;

                    img {
                      width: 100%;

                    }
                  }
                }
              }

            }
          }
          .Diet, .Drug, .Insulin, .motion {
            height: 445px;
            margin-top: -1px;
            padding-bottom: 3rem;
            overflow-y: scroll;
            overflow-x: hidden;
          }
        }

      }
    }
    .probability {
      border-top:6px solid #E7EAEC;;
      margin-top: 16px;
      background-color: #fff;
      h3.text {
        margin-bottom: 0;
        padding: 10px;
        font-weight: normal;
        font-size: 16px;
        color: #333333;
        border-bottom: 1px solid #E7EAEC;;
      }
      & > div {
        width: 33%;
        display: inline-block;
        .top {
          margin-left: 20px;
          overflow: hidden;
          .time {
            padding: 0;
            margin: 23px 0;
            background: #EEEEEE;
            border-radius: 4px;
            max-width: 143px;
            height: 43px;
            font-size: 20px;
            color: #333333;
            line-height: 43px;
            text-align: center;
            display: inline-block;
          }
          .average, .times {
            padding: 0;
            margin: 28px 0;
            display: inline-block;
            //margin-top: 23px;
            .text {
              font-size: 14px;
              color: #666666;
            }
            .value {
              font-size: 20px;
              color: #333333;
            }
            &.times {
              margin: 28px 0;
              padding: 0;
              //margin: 23px 0 auto 23px;
            }
          }

        }
        .bottom {
          overflow: hidden;
          padding-top: 20px;
          padding-bottom: 40px;
          &>div.col-lg-4{
            text-align: center;
            padding: 0;
            .bottomMain {
              margin: 10px auto;
              display: inline-block;
              width: 80px;
              height: 80px;
              border-radius: 50%;
              background: #65C531;
              .text{
                margin-top: 10px;
                text-align: center;
                font-size: 14px;
                color: #FFFFFF;
              }
              .value{
                margin-top: 10px;
                text-align: center;
                font-size: 18px;
                color: #FFFFFF;
              }
              &.bottomMainHigh{
                background: #ED4040;
              }
              &.bottomMainLow{
                background: #2DB3C5;
              }
            }
            .percen{
              text-align: center;
              font-size: 16px;
              color: #666666;
              //padding-left: 25px;
            }
          }

        }
        &.oneMonth {
          border-left: 1px solid #E8E8E8;;
          border-right: 1px solid #E8E8E8;
        }

      }
    }

    .FBGChartDate {
      margin-top: 20px;
      //overflow: hidden;
      background-color: #fff;
      //min-height: 664px;

      .FBGChartDateRight {
        height: 370px;
        background-color: #fff;
        width: 100%;
        float: left;
        border-left: 1px solid #e7eaec;
        .title {
          font-size: 16px;
          color: #333333;
          height: 46px;
          line-height: 46px;
          padding-left: 20px;
          border-bottom: 1px solid #E7EAEC;;
        }
        div#FBGChart {
          float: right;
          margin-right: 10px;
          width: 100%;
          div {
            width: 90%;
            canvas {
              width: 100%;
            }
          }

        }
      }
    }
  }
  #DBG {
    display: none;
    #RBGModel, #printModel {
      box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px 0px;
      width: 400px;
      margin: 15% auto;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      background-color: #fff;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      z-index: 100;
      border: 1px solid rgba(0, 0, 0, .2);
      border-radius: 6px;
      outline: 0;
      display: none;
      .RBGModelHead {
        font-size: 18px;
        padding: 15px;
        border-bottom: 1px solid #e5e5e5;
      }
      .RBGModelBody {
        padding: 15px;
        h3 {
          font-weight: normal;
          font-size: 16px;
          .parentOUt {
            margin-top: @font1*15;
            margin-bottom: @font1*15;
            overflow: hidden;
            b {
              display: inline-block;
              font-weight: normal;
              line-height: 40px;
              &.unit {
                padding-right: 0;
                padding-left: 5px;
              }
            }
            .textbox.combo.datebox {
              width: 50% !important;
              height: 40px !important;
              padding-left: 10px;
              .textbox-addon.textbox-addon-right {
                height: 40px;
                margin-right: 8px;
                a {
                  height: 40px !important;
                  width: 30px !important;
                  background-size: 64%;
                }

              }
            }
            input {
              &.textbox-text {
                width: 100% !important;
              }
              width: 50% !important;
              border-radius: 3px;
              background-color: #fff;
              height: 40px;
              &#bootPickerDate {
                font-weight: normal;
                display: inline-block;
              }

            }
          }

          .maxAlert {
            clear: both;
            font-size: @font1*12;
            text-align: center;
          }
        }
      }
      .RBGModelFoot {
        border-top: 1px solid #e5e5e5;
        padding-top: @font1*15;
        padding-bottom: @font1*18;
        text-align: center;
        button {
          border-radius: 3px;
          font-size: @font1*14;
          height: @font1*34;
          width: @font1*100;
          text-align: center;
          line-height: @font1*30;
          margin-right: @font1*10;
          &.RGBCancel, &.printCancelBtn {
            //outline: 1px solid #ccc;
            outline: none;
            border-radius: 3px;
            background-color: #bababa;
            border-color: #bababa;
            color: #FFFFFF;
          }
          &.RGBCave, &.printBtn {
            outline: none;
            margin-left: @font1*10;
            background-color: #1ab394;
            border-color: #1ab394;
            color: #FFFFFF;
          }
        }
        a {
          &.RGBCave, &.printBtn {
            outline: none;
            border: 1px solid #1ab394;
            margin-left: @font1*10;
            background-color: #1ab394;
            //border-color: #1ab394;
            color: #FFFFFF;
          }
        }
      }
    }

    ul.DBGChildTab {
      margin-bottom: 0;
      overflow: hidden;
      li {
        cursor: pointer;
        float: left;
        font-size: @font1*18;
        padding: @font1*10 @font1*16;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        margin-right: 4px;
        &.active {
          background-color: #1ab394;
          color: #fff;
          &:hover {
            background-color: #1ab394;
            color: #fff;

          }
        }
        &:hover {
          background-color: #fff;
          color: #1ab394;
        }
      }
    }
    #DBGMain {
      padding: 30*@font1;
      background-color: #fff;
      font-size: @font1*16;
      div.navRecord {
        font-size: @font1*16;
        width: 100%;
        span.text {
          position: absolute;
          line-height: 80px;
          font-size: @font1*16;
          display: inline-block;
          vertical-align: middle;

        }
        .over_X {
          overflow-x: scroll;
          margin-left: 90px;
          ul.record {
            //overflow-x: scroll;
            //margin: 20px ;
            position: relative;
            padding: 10px 30px;
            height: 90px;
            white-space: nowrap;
            font-size: @font1*16;
            vertical-align: middle;
            display: inline-block;
            @media screen and (min-width: 1360px) and (max-width: 1442px) {
              & {
                margin-top: 15px;
              }
            }
            li {
              cursor: pointer;
              margin: 0 15*@font1;
              font-size: @font1*14;
              border: 1px solid #e5e6e7;
              width: 260px;
              display: inline-block;
              height: 80px;
              border-radius: 0;
              &:last-child {
                margin-right: 0;
              }
              &.hasBorder {
                border: 1px solid #1ab394;
                div {
                  color: #1ab394;
                  span {
                    color: #1ab394;
                  }
                  b {
                    color: #1ab394;

                  }

                }

              }
              div {
                margin: 8px 0;
                font-size: @font1*14;
                span {
                  font-size: @font1*14;
                  vertical-align: top;
                }
                b {
                  font-size: @font1*14;
                  font-weight: normal;
                }

              }
              @media screen and (min-width: 1024px) and (max-width: 1360px) {
                & {
                  padding: 8px 5px;
                  margin: 0 0.3rem;
                }
              }
              @media screen and (min-width: 1360px) and (max-width: 1400px) {
                & {
                  padding: 8px 5px;
                  margin: 0 0.4rem;
                }
              }
              @media screen and (min-width: 1400px) and (max-width: 1500px) {
                & {
                  padding: 8px 5px;
                  margin: 0 0.5rem;
                }
              }
              @media screen and (min-width: 1500px) and (max-width: 1600px) {
                & {
                  padding: 8px 5px;
                  margin: 0 0.6rem;
                }
              }
              @media screen and (min-width: 1600px) and (max-width: 1700px) {
                & {
                  padding: 8px 5px;
                  margin: 0 0.3rem;
                }
              }
              @media screen and (min-width: 1700px) and (max-width: 1900px) {
                & {
                  padding: 8px 5px;
                  margin: 0 0.6rem;
                }
              }
              @media screen and (min-width: 1800px) {
                & {
                  padding: 8px 15px;
                  margin: 0 0.9rem;
                }
              }
            }
          }
        }

      }
      div.ReferenceBG {
        margin-top: @font1*30;
        button {
          //width: @font1*130;
          //height: @font1*40;
          outline: none;
          background-color: #1ab394;
          padding: @font1*6 @font1*12;
          font-size: @font1*16;
          font-weight: normal;
          color: #fff;

        }
      }
      div.ContinuouslyPic, .DayPic, .referListPic, .DietPic, .InsuliPic {
        padding: @font1*30 0;
        border-top: 1px dashed #CCC;
        &.ContinuouslyPic {
          border-top: none;
          margin-top: 30*@font1;
        }
        div.chart2-1a-table {
          margin-top: 30px;
        }
        span.cirSpan {
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          i {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            display: inline-block;
            height: 15px;
            width: 15px;
            font-size: 10px;
            border-radius: 50%;
            text-align: center;
            line-height: 13px;
            vertical-align: middle;
          }
          .Cir {
            border: 1px solid #1ab394;
            color: #1ab394;
          }
          .fold {
            color: #fff;
            border: 1px solid #333;

          }
          span:hover {
            color: #1ab394;
          }
        }

        div#chart2-1a, #chart2-2b, #chart2-2c, #chart2-2d, #chart2-2e {
          height: 480px;
          text-align: center;
          width: 100% !important;
          margin-top: 10px;
          padding-top: 50px;
          padding-bottom: 5px;
          border: 1px solid #e7eaec;
          div#highcharts-0, #highcharts-4, #highcharts-120, #highcharts-139, .highcharts-container {
            margin: 2px auto;
            height: 410px;
            width: 100% !important;
            overflow: visible !important;
            svg {
              width: 100% !important;
              overflow: visible;
              rect.highcharts-background {
                width: 100% !important;
              }
            }
          }
        }
      }
      a.look {
        float: right;
      }
    }
  }
}

//点击时间input框，弹出时间选择
fieldset.minute {
  height: 240px;
  overflow: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .textbox-icon.combo-arrow {
    display: inline-block;
    /*background-color: #0d8ddb;*/
  }

}

//佩戴记录样式⬇️
#WearRecord {
  background-color: #fff;
  margin: 0;
  padding: 2rem 15px 2rem 1rem;

}

#WearRecord table {
  thead {
    tr {
      td {
        font-size: 1.1rem;
      }
    }
  }
}

#WearRecord table thead td {
  background: #fff;
  font-weight: bold;
}

#WearRecord table tbody td {
  color: #666;
  font-weight: 300;
  font-size: 1.1rem;
  background-color: #fff;
}

#WearRecord table tbody td button {
  color: #fff;
  background-color: #1AB394;
}

//查看事件⬇️
#ViewEvent {
  background-color: #fff;
  margin: 0;
  padding: 2rem 15px 2rem 1rem;

}

#ViewEvent table {
  thead {
    tr {
      td {
        font-size: 1.1rem;
      }
    }
  }
}

#ViewEvent table thead td {
  background: #fff;
  font-weight: bold;
}

#ViewEvent table thead td {
  background: #fff;
  font-weight: bold;
}

#ViewEvent table tbody td {
  color: #666;
  font-weight: 300;
  font-size: 1.1rem;
  background-color: #fff;
}

#ViewEvent table tbody td button {
  color: #fff;
  background-color: #1AB394;
}

//图片放大遮罩层样式
.bgCover {
  .center {
    width: 400px;
    height: 400px;
    img {
      //width: 100%;
      //min-width: 400px;
      //max-width: 600px;
    }
  }

}